<template>
  <div class="skeleton-loader">
    <!-- 商品卡片骨架屏 -->
    <div v-if="type === 'product-card'" class="skeleton-product-card">
      <div class="skeleton-image"></div>
      <div class="skeleton-content">
        <div class="skeleton-brand"></div>
        <div class="skeleton-name"></div>
        <div class="skeleton-code"></div>
        <div class="skeleton-price"></div>
        <div class="skeleton-actions">
          <div class="skeleton-button"></div>
          <div class="skeleton-select"></div>
          <div class="skeleton-bottom"></div>
        </div>
      </div>
    </div>

    <!-- 轮播图骨架屏 -->
    <div v-else-if="type === 'carousel'" class="skeleton-carousel">
      <div class="skeleton-header">
        <div class="skeleton-title"></div>
        <div class="skeleton-button"></div>
      </div>
      <div class="skeleton-items">
        <div v-for="i in count" :key="i" class="skeleton-item">
          <div class="skeleton-item-image"></div>
          <div class="skeleton-item-name"></div>
          <div class="skeleton-item-desc"></div>
          <div class="skeleton-item-price"></div>
        </div>
      </div>
    </div>

    <!-- 评论骨架屏 -->
    <div v-else-if="type === 'comment'" class="skeleton-comment">
      <div class="skeleton-header">
        <div class="skeleton-title"></div>
        <div class="skeleton-button"></div>
      </div>
      <div class="skeleton-container" v-for="i in length" :key="i">
        <div class="skeleton-avatar"></div>
        <div class="skeleton-info go-flex-sc">
          <div class="skeleton-content">
            <div class="skeleton-author"></div>
            <div class="skeleton-date"></div>
            <div class="skeleton-text"></div>
          </div>
          <div class="skeleton-button"></div>
        </div>
      </div>
    </div>

    <!-- 最近浏览 -->
    <div v-else-if="type === 'browse'" class="skeleton-carousel-small">
      <div class="skeleton-header">
        <div class="skeleton-title"></div>
        <div class="skeleton-button"></div>
      </div>
      <div class="skeleton-items-small">
        <div v-for="i in 10" :key="i" class="skeleton-item">
          <div class="skeleton-item-image"></div>
          <div class="skeleton-item-price"></div>
        </div>
      </div>
    </div>

    <!-- 默认骨架屏 -->
    <div v-else class="skeleton-default">
      <div v-for="i in count" :key="i" class="skeleton-line"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  type: {
    type: String,
    default: 'default'
  },
  count: {
    type: Number,
    default: 4
  },
  length: {
    type: Number,
    default: 3
  }
});
</script>

<style lang="scss" scoped>
.skeleton-loader {
  width: 100%;
}

// 通用动画
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.skeleton-base {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

// 商品卡片骨架屏
.skeleton-product-card {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 30px;
  padding-bottom: 30px;

  .skeleton-image {
    @extend .skeleton-base;
    width: 55%;
    height: 840px;
    margin-right: 5%;
  }

  .skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    min-width: 300px;
    // height: 840px;

    .skeleton-brand {
      @extend .skeleton-base;
      height: 40px;
      width: 100%;
      margin-bottom: 15px;
    }

    .skeleton-name {
      @extend .skeleton-base;
      height: 40px;
      width: 50%;
      margin-bottom: 15px;
    }

    .skeleton-code {
      @extend .skeleton-base;
      height: 40px;
      width: 30%;
      margin-bottom: 15px;
    }

    .skeleton-price {
      @extend .skeleton-base;
      height: 40px;
      width: 50%;
      margin-bottom: 30px;
    }

    .skeleton-actions {
      .skeleton-button {
        @extend .skeleton-base;
        height: 220px;
        width: 95%;
        margin-bottom: 20px;
      }

      .skeleton-select {
        @extend .skeleton-base;
        height: 320px;
        width: 95%;
        margin-bottom: 30px;
      }

      .skeleton-bottom {
        @extend .skeleton-base;
        height: 120px;
        width: 95%;
        margin-bottom: 30px;
      }
    }
  }
}

// 轮播图骨架屏
.skeleton-carousel {
  .skeleton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 60px;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background-color: #e0e0e0;
      z-index: 0;
    }

    .skeleton-title {
      @extend .skeleton-base;
      height: 32px;
      width: 200px;
      position: relative;
      z-index: 1;
      background-color: #fff;
      padding: 0 30px 0 0;
    }

    .skeleton-button {
      @extend .skeleton-base;
      height: 14px;
      width: 80px;
      position: relative;
      z-index: 1;
      background-color: #fff;
      padding: 0 0 0 30px;
    }
  }

  .skeleton-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;

    .skeleton-item {
      padding: 0;

      .skeleton-item-image {
        @extend .skeleton-base;
        width: 100%;
        padding-top: 133.33%; /* 3:4 aspect ratio */
        margin-bottom: 15px;
        position: relative;
      }

      .skeleton-item-name {
        @extend .skeleton-base;
        height: 18px;
        width: 90%;
        margin-bottom: 10px;
      }

      .skeleton-item-desc {
        @extend .skeleton-base;
        height: 18px;
        width: 60%;
        margin-bottom: 10px;
      }

      .skeleton-item-price {
        @extend .skeleton-base;
        height: 18px;
        width: 40%;
      }
    }
  }
}

// 评论骨架屏
.skeleton-comment {
  margin-top: 60px;
  margin-bottom: 30px;

  .skeleton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background-color: #e0e0e0;
      z-index: 0;
    }

    .skeleton-title {
      @extend .skeleton-base;
      height: 32px;
      width: 200px;
      position: relative;
      z-index: 1;
      background-color: #fff;
      padding: 0 30px 0 0;
    }

    .skeleton-button {
      @extend .skeleton-base;
      height: 14px;
      width: 140px;
      position: relative;
      z-index: 1;
      background-color: #fff;
      padding: 0 0 0 30px;
    }
  }

  .skeleton-container {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #eaeaea;

    .skeleton-avatar {
      @extend .skeleton-base;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 20px;
      flex-shrink: 0;
    }

    .skeleton-info {
      flex: 1;
      display: flex;
      justify-content: space-between;

      .skeleton-content {
        flex: 1;

        .skeleton-author {
          @extend .skeleton-base;
          height: 20px;
          width: 120px;
          margin-bottom: 10px;
        }

        .skeleton-date {
          @extend .skeleton-base;
          height: 16px;
          width: 100px;
          margin-bottom: 15px;
        }

        .skeleton-text {
          @extend .skeleton-base;
          height: 16px;
          width: 100%;
          margin-bottom: 10px;
        }
      }

      .skeleton-button {
        @extend .skeleton-base;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        flex-shrink: 0;
      }
    }
  }
}

// 最近浏览 轮播图骨架屏
.skeleton-carousel-small {
  margin-top: 60px;
  margin-bottom: 30px;

  .skeleton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background-color: #e0e0e0;
      z-index: 0;
    }

    .skeleton-title {
      @extend .skeleton-base;
      height: 32px;
      width: 250px;
      position: relative;
      z-index: 1;
      background-color: #fff;
      padding: 0 30px 0 0;
    }

    .skeleton-button {
      @extend .skeleton-base;
      height: 14px;
      width: 80px;
      position: relative;
      z-index: 1;
      background-color: #fff;
      padding: 0 0 0 30px;
    }
  }

  .skeleton-items-small {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;

    .skeleton-item {
      padding: 0;

      .skeleton-item-image {
        @extend .skeleton-base;
        width: 100%;
        padding-top: 133.33%; /* 3:4 aspect ratio */
        margin-bottom: 15px;
        position: relative;
      }

      .skeleton-item-price {
        @extend .skeleton-base;
        height: 18px;
        width: 60%;
        margin: 0 0 10px 0;
      }
    }
  }
}

// 默认骨架屏
.skeleton-default {
  .skeleton-line {
    @extend .skeleton-base;
    height: 16px;
    margin-bottom: 10px;
  }
}

// 响应式样式
@media (max-width: 991px) {
  .skeleton-product-card {
    .skeleton-image {
      width: 100%;
      margin-right: 0;
      margin-bottom: 30px;
      height: 400px;
    }

    .skeleton-content {
      width: 100%;
    }
  }

  .skeleton-carousel,
  .skeleton-carousel-small {
    .skeleton-items,
    .skeleton-items-small {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
  }
}

@media (max-width: 767px) {
  .skeleton-product-card {
    padding: 0 15px 20px;

    .skeleton-image {
      height: 350px;
    }

    .skeleton-content {
      .skeleton-brand {
        width: 100px;
      }

      .skeleton-name {
        width: 90%;
      }

      .skeleton-price {
        width: 60%;
      }
    }
  }

  .skeleton-carousel,
  .skeleton-carousel-small {
    padding: 0 15px;

    .skeleton-header {
      margin-top: 40px;
    }

    .skeleton-items,
    .skeleton-items-small {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 15px;
    }
  }

  .skeleton-comment {
    padding: 0 15px;

    .skeleton-header {
      margin-top: 40px;
    }

    .skeleton-container {
      .skeleton-avatar {
        width: 40px;
        height: 40px;
      }
    }
  }
}

@media (max-width: 480px) {
  .skeleton-carousel,
  .skeleton-carousel-small {
    .skeleton-items,
    .skeleton-items-small {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
  }
}
</style>